Skip to content

Sheffield | 26-ITP-Jan | Mahammad Osman | Sprint 1 | Wireframe #1046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Darkidd77 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Sheffield | 26-ITP-Jan | Mahammad Osman | Sprint 1 | Wireframe #1046

Darkidd77 wants to merge 1 commit into from

Conversation

@Darkidd77
Copy link

@Darkidd77 Darkidd77 commented Jan 24, 2026 •
edited
Loading

Learners, PR Template

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Changelist

  • Changed the main header title to "Github Learning" and updated the introductory text.
  • Added a new section with articles explaining GitHub, including images and descriptions for "What is GitHub?", "Branching" and "Commits".
  • Updated the footer text to reflect copyright for 2026.

Questions

Please, can you let me what you think?

@Darkidd77
Update index.html and style.css for GitHub Learning project
3aad5d9 
- Changed the main header title to "Github Learning" and updated the introductory text.
- Added a new section with articles explaining GitHub, including images and descriptions for "What is GitHub?", "Branching", and "Commits".
- Updated the footer text to reflect copyright for 2026.
@netlify
Copy link

netlify bot commented Jan 24, 2026 •
edited
Loading

✅ Deploy Preview for cyf-onboarding-module ready!

Name Link
🔨 Latest commit 3aad5d9
🔍 Latest deploy log https://app.netlify.com/projects/cyf-onboarding-module/deploys/6974ea82a7b3d90008aaff06
😎 Deploy Preview https://deploy-preview-1046--cyf-onboarding-module.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 2 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 86 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@Darkidd77 Darkidd77 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 24, 2026
@github-actions

This comment has been minimized.

Sign in to view
@github-actions github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 24, 2026
@github-actions

This comment has been minimized.

Sign in to view
@Darkidd77 Darkidd77 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 24, 2026
@github-actions

This comment has been minimized.

Sign in to view
@github-actions github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 24, 2026
@github-actions

This comment has been minimized.

Sign in to view
@Darkidd77 Darkidd77 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 24, 2026
@github-actions github-actions bot removed the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 24, 2026
@github-actions

This comment has been minimized.

Sign in to view
@Darkidd77 Darkidd77 added the Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. label Jan 29, 2026
cjyuan
cjyuan reviewed Jan 30, 2026
View reviewed changes
Copy link
Contributor

@cjyuan cjyuan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the wireframe image, the images in articles 2 and 3 have the same height. Can you also align the height of the images in articles 2 and 3 in your implementation?

Wireframe/index.html
<main>
<section>
<article >
<img src="data:image/png;base64,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" alt="picture shows GitHub logo" />
Copy link
Contributor

@cjyuan cjyuan Jan 30, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Embedding an image as base64-encoded string in HTML makes reading and editing the HTML code difficult.
A better practice is to save the images as an external files.

Can you save all three images as external file? Alternatively, you can just use placeholder.svg in all three articles. Since this is a wireframe implementation, it does not matter much what images you use as the placeholders.

@cjyuan cjyuan added Reviewed Volunteer to add when completing a review with trainee action still to take. and removed Needs Review Trainee to add when requesting review. PRs without this label will not be reviewed. labels Jan 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cjyuan cjyuan cjyuan left review comments

At least 2 approving reviews are required to merge this pull request.

Assignees

No one assigned

Labels

Reviewed Volunteer to add when completing a review with trainee action still to take.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Darkidd77 @cjyuan